<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="d3-tip.css">
    
</head>
<body>
    <text dominant-baseline=""></text>
    <script src="d3.min.js"></script>
    <!-- <script src="https://d3js.org/d3.v7.min.js"></script> -->
    <script src="d3-tip.js"></script>
    <script>
        const width = 1700 ;
        const height = 1000 ;
        const margin = 50 ;

        const svg = d3.select('body').append('svg');
        svg.attr('width',width);
        svg.attr('height',height);
        svg.attr('viewBox','75,5,60,50')
        svg.style('border','2px solid #ccc');


        var tip = d3.tip()
        .attr('class', 'd3-tip')
        .html(function(e,d) { return d.properties.name; })
        tip.offset([0, -0])
        svg.call(tip);

        (async ()=>{
           // const data = await d3.json('china-geo.json');
            const data = await d3.json('china-geo.json');
            console.log(data);


            // const projections = d3.geoMercator()
            //    .fitExtent([[0,0],[600,600]],data)
            //     .fitSize([1000,1000],data)

            
            const path = d3.geoPath()//.projection(projection)
           
            data.features.forEach(element => {
                if(!element.properties.centroid){
                    if(!element.properties.center){
                        element.properties.centroid = path.centroid(element);
                        element.properties.name = '南海岛礁' ;
                    }else{
                        element.properties.centroid = element.properties.center;
                    }
                }
            });

            //const projection = d3.geoAzimuthalEqualArea()
            const projection = d3.geoMercator()
            .center([105, 35]) // 中国的中心点经纬度
            .scale(500) // 调整投影的缩放，控制地图大小
            .translate([width / 2, height / 2]) // 调整平移量，将地图居中显示

            //path.projection(projection)

            console.log(path.area(data))
            console.log(path.projection());

            const g = svg.append('g').attr('transform','scale(1,-1) translate(0,-60)');
            g.selectAll('path')
             .data(data.features)
             .join('path')
             .attr('d',path)
             .attr('fill',function(d,i){
                //return d3.schemeSet1[i%d3.schemeSet1.length]
                return 'none';
            })
            .attr('stroke-width',.1)
            .attr('stroke','#ccc')
            .attr('fill',(d,i)=>d3.schemeSet3[i%d3.schemeSet3.length])
            .on('mouseover',over)
            .on('mouseout',out)
            


            svg.append('g')
             .selectAll('text')
             .data(data.features.filter(d=>d.properties.centroid))
             .join('text')
             .attr('x',d=>d.properties.centroid[0])
             .attr('y',d=>-d.properties.centroid[1]+60)
            //  .attr('x',d=>projection(d.properties.centroid)[0])
            //  .attr('y',d=>projection(d.properties.centroid)[1])
             .text(d=>d.properties.name)
             .attr('font-size',1)
             .attr('text-anchor','middle')
             .attr('dominant-baseline','middle')
             .attr('style','cursor:default')
            //  .on('mouseover',clickOpt)
            // .attr('transform',`rotate(10,100,100)`)


            function over(e,d){
                d3.select(e.target)
                  .attr('stroke-width',0.3)
                  .attr('stroke','#ccc')
                  .attr('opacity',0.8)
                tip.show(e,d);  
            }
            function out(e,d){
                d3.select(e.target)
                  .attr('stroke-width',0.1)
                  .attr('opacity',1)
                tip.hide(e,d)  
            }

        })();
         
    </script>
    <text text-anchor="middle" dominant-baseline="" transform="rotate" ></text>
</body>
</html>